<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="edit_pic.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="edit_pic.js"></script>
<script type="text/javascript" src="button.js"></script>
<!-- 页面样式来源:知乎 -->
<div class="ProfileHeader-main">
    <!-- 头像上传 -->
    <div class="UserAvatarEditor ProfileHeader-avatar">
        <div class="UserAvatar">
            <img id="myphoto" class="Avatar Avatar--large UserAvatar-inner" src="07.jpg" style="width: 160px; height: 160px;"></div>
        <div class="Mask UserAvatarEditor-mask" id="cli">
            <div class="Mask-mask Mask-mask--black UserAvatarEditor-maskInner"></div>
            <div class="Mask-content">
                <svg viewBox="0 0 20 16" class="Icon UserAvatarEditor-cameraIcon Icon--camera" width="30" height="27" aria-hidden="true" style="height: 27px; width: 30px;">
                    <title></title>
                    <g>
                        <path d="M18.094 2H15s-1-2-2-2H7C6 0 5 2 5 2H2C0 2 0 3.967 0 3.967V14c0 2 2.036 2 2.036 2H17c3 0 3-1.983 3-1.983V4c0-2-1.906-2-1.906-2zM10 12c-1.933 0-3.5-1.567-3.5-3.5S8.067 5 10 5s3.5 1.567 3.5 3.5S11.933 12 10 12zm0 1.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm7.5-8c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1z" fill-rule="evenodd"></path>
                    </g>
                </svg>
                <div class="UserAvatarEditor-maskInnerText">修改我的头像</div>
            </div>
        </div>
        <input type="file" ref="fileinput" id="file" accept="image/png,image/jpeg" style="display: none;" onchange="editpic()">
    </div>



    <!-- 图片修改 -->
    <div class="container" style="display: none">
        <div class="content">
            <div class="component" style="width: 500px;">
                <div class="overlay">
                    <div class="overlay-inner">
                    </div>
                </div>
                <img id="readcrop" class="resize-image" src="" alt="image for resizing">
                <button class="btn-crop js-crop">剪切
                </button>
                <button class="btn-cancel" onclick="cancel()">取消
                </button>
            </div>
        </div>
    </div>
